<template>
  <div class="list">
    <pannle title="账号列表">
      <!-- <template #btn>
        <el-button type="primary">编辑</el-button>
      </template> -->
      <div class="list-box">
        <el-table :data="tableData" ref="table">
          <!-- 复选框 -->
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column prop="account" label="账号"> </el-table-column>
          <el-table-column prop="userGroup" label="用户组"> </el-table-column>
          <el-table-column prop="ctime" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.ctime | filterTime }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button size="small" @click="dell(scope.row)">编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="dalAccount(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <div style="margin-top: 20px">
        <el-button type="danger" @click="all()">批量删除</el-button>
        <el-button type="primary" @click="toggleSelection()"
          >取消选择</el-button
        >
      </div>
    </pannle>
    <!-- 弹窗 -->
    <el-dialog title="修改中心" :visible.sync="isshow">
      <el-form :model="fromData">
        <el-form-item label="账号" label-width="100px">
          <el-input v-model="fromData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户组" label-width="100px">
          <el-select v-model="fromData.userGroup" placeholder="请选择用户组">
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="超级管理员" value="超级管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isshow = false">取 消</el-button>
        <el-button type="primary" @click="editUserBtn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pannle from "@/components/Pannle.vue";
import { userList, delAccount, delAll, editAll } from "../../api/user";
export default {
  data() {
    return {
      // 当前页数
      page: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      //被选中项
      multipleSelection: [],
      //表示弹窗--不显示
      isshow: false,
      //from表单
      fromData: {
        id: "",
        account: "",
        userGroup: "",
      },
    };
  },
  components: {
    Pannle,
  },
  methods: {
    // 修改账户信息的弹窗
    async editUserBtn() {
      let res = await editAll(this.fromData);
      if (res.data.code === 0) {
        // 修改成功
        //关闭成功弹窗
        this.isshow = false;
        this.getList();
      }
    },
    // 编辑器按钮
    dell(row) {
      let { id, account, userGroup } = row;
      this.fromData = { id, account, userGroup };
      this.isshow = true;
    },
    // 确认按钮取消弹窗
    editUserBtn() {
      let res = editAll(this.fromData);
      this.isshow = false;
    },
    // 批量删除
    all() {
      let delArr = [];
      this.multipleSelection.forEach((item) => {
        delArr.push(item.id);
      });
      delArr = JSON.stringify(delArr);
      //    接口对接
      delAll({ id: delArr }).then((res) => {
        // 如果成功---重新拉取页面
        if (res.data.code) {
          this.getList();
        }
      });
    },
    //  单删账号
    dalAccount(id) {
      this.$confirm("是否删除该用户", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await delAccount({ id });
        if (res.data.code === 0) {
          this.getList();
        }
      });
    },
    // 切换每页数据数条
    handleSizeChange(data) {
      this.pageSize = data;
      this.getList();
    },
    // 当前页码
    handleCurrentChange(page) {
      this.page = page;
      this.getList();
    },
    // 请求用户列表
    async getList() {
      let data = {
        currentPage: this.page,
        pageSize: this.pageSize,
      };
      let res = await userList(data);
      console.log(res);
      let { total } = res.data;
      this.total = total;
      this.tableData = res.data.data;
    },
    // 选中添加数据到空数组中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.table.toggleSelection(row);
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
  },
  created() {
    // 请求列表
    this.getList();
  },
  filters: {
    filterTime(timeStr) {
      let date = new Date(timeStr);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      return `${y}-${m}-${d}`;
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
}
.el-select {
  width: 100%;
}
</style>